<template>
	<!-- 判断图片展示模式 -->
	<view class="top-nav-bar" :class="showMode == 'auto' ? 'auto' : 'cover'"
		:style="{ backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none', backgroundColor: backgroundColor, height: navHeight + 'rpx' }">
		<!-- 左侧内容 -->
		<view class="nav-left" @tap="onLeftClick">
			<image v-if="leftIcon" :src="leftIcon" class="icon" />
			<text v-if="leftText" :style="leftStyle">{{ leftText }}</text>
		</view>
		<!-- 中间内容 -->
		<view class="nav-center" :style="centerStyle">
			<text v-if="centerText" :style="centerStyle">{{ centerText }}</text>
		</view>

		<!-- 右侧内容 -->
		<view class="nav-right" @tap="onRightClick">
			<image v-if="rightIcon" :src="rightIcon" class="icon" />
			<text v-if="rightText" :style="rightStyle">{{ rightText }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			backgroundImage: {
				type: String,
				default: ''
			}, // 背景图片
			backgroundColor: {
				type: String,
				default: '#ffffff'
			}, // 背景颜色
			navHeight: {
				type: Number,
				default: 88
			}, // 导航栏高度，单位rpx
			leftIcon: {
				type: String,
				default: ''
			}, // 左侧图标
			leftText: {
				type: String,
				default: ''
			}, // 左侧文本
			leftStyle: {
				type: Object,
				default: () => ({
					fontSize: '28rpx',
					color: '#fff'
				})
			}, // 左侧样式
			centerText: {
				type: String,
				default: ''
			}, // 中间文本
			centerStyle: {
				type: Object,
				default: () => ({
					fontSize: '32rpx',
					color: '#fff',
					fontWeight: 'bold'
				})
			}, // 中间样式
			rightIcon: {
				type: String,
				default: ''
			}, // 右侧图标
			rightText: {
				type: String,
				default: ''
			}, // 右侧文本
			rightStyle: {
				type: Object,
				default: () => ({
					fontSize: '28rpx',
					color: '#fff'
				})
			}, // 右侧样式
			// 图片展示模式，默认cover，auto自适应
			showMode: {
				type: String,
				default: 'cover'
			}
		},
		methods: {
			onLeftClick() {
				this.$emit('left-click');
			},
			onRightClick() {
				this.$emit('right-click');
			},
		},
	};
</script>

<style scoped lang="scss">
	.top-nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		/* background-size: cover; */
		background-repeat: no-repeat;
		background-position: center;
		margin-top: 80rpx;
	}

	.cover {
		background-size: cover;
	}

	.auto {
		background-size: auto 80rpx !important;
	}

	.nav-left,
	.nav-right {
		display: flex;
		align-items: center;
	}

	.nav-center {
		flex: 1;
		text-align: center;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
</style>